<template>
  <div class="panel-left-container">
    <DataPanel
      class="panel-item-container"
      title="情况概览"
      :height="28"
      icon="/static/img/park/property/overview.webp"
    >
      <div class="overview-container">
        <div
          class="overview-item-container"
          v-for="(item, index) in overviewList"
          :key="index"
        >
          <img class="overview-item-img" :src="item.img" />
          <span class="overview-item-num">{{ item.num }}</span>
          <span class="overview-item-desc">{{ item.desc }}</span>
        </div>
      </div>
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="本月缴费统计"
      :height="40"
      icon="/static/img/park/property/monthly-payment.webp"
    >
      <div class="statistics-container">
        <div class="statistics-panel-container">
          <ContentBlock
            class="statistics-panel-item-container"
            v-for="(item, index) in paymentStatisticsData.overviewList"
            :key="index"
          >
            <span class="statistics-panel-item-desc">{{ item.desc }}</span>
            <span
              class="statistics-panel-item-num"
              :style="{ color: item.color }"
              >{{ item.amount }}</span
            >
          </ContentBlock>
        </div>
        <chart-view
          class="statistics-chart"
          :chart-option="multipleRingOption"
          :auto-resize="true"
          height="100%"
        />
      </div>
    </DataPanel>

    <DataPanel
      class="panel-item-container"
      title="各栋楼收缴情况"
      :height="32"
      icon="/static/img/park/property/collection-situation.webp"
    >
      <div class="collection-container">
        <RadioGroup
          :options="collectionOptions"
          :active-key="0"
          align="custom"
          margin="1rem 0.875rem 0 auto"
          @change="radioGroupChangeEvent"
        />
        <chart-view
          class="statistics-chart"
          :chart-option="barOption"
          :auto-resize="true"
          height="100%"
        />
      </div>
    </DataPanel>
  </div>
</template>

<script>
import { multipleRingOptionHandler } from "./configs/multiple-pie.conf";
import { barOptionHandler } from "./configs/bar.conf";
import DataPanel from "@/components/park/dataPanel.vue";
import ContentBlock from "@/components/ContentBlock/ContentBlock.vue";
import RadioGroup from "@/components/RadioGroup/RadioGroup.vue";

//#region 临时展示数据--START
import { generateCollectionData } from "../../temp/data";
// #endregion 临时展示数据--END

export default {
  name: "LeftPanel",
  components: {
    DataPanel,
    ContentBlock,
    RadioGroup
  },
  data() {
    return {
      overviewList: [
        {
          img: "/static/img/park/property/owner.webp",
          num: 0,
          desc: "业主数量"
        },
        {
          img: "/static/img/park/property/houses.webp",
          num: 0,
          desc: "房屋数量"
        },
        {
          img: "/static/img/park/property/car.webp",
          num: 0,
          desc: "车辆数量"
        }
      ],

      paymentStatisticsData: {},

      collectionOptions: [
        {
          label: "本月",
          key: 0
        },
        {
          label: "上月",
          key: 1
        }
      ],
      collectionSituationList: []
    };
  },

  computed: {
    multipleRingOption() {
      const { overviewChartsList } = this.paymentStatisticsData;
      return multipleRingOptionHandler(overviewChartsList);
    },

    barOption() {
      return barOptionHandler(this.collectionSituationList);
    }
  },

  created() {
    // 获取相关数据方法
    this.getOverviewData();
    this.getPaymentStatisticsData();
    this.getCollectionData();
  },

  methods: {
    /**
     * radio group change 事件
     * @param {String|Number} key
     */
    radioGroupChangeEvent(key) {
      this.collectionSituationList = generateCollectionData(key);
    },

    /**
     * 获取情况概览数据方法
     */
    getOverviewData() {
      this.overviewList[0].num = 6234;
      this.overviewList[1].num = 5124;
      this.overviewList[2].num = 2136;
    },

    /**
     * 获取本月缴费统计数据方法
     */
    getPaymentStatisticsData() {
      this.paymentStatisticsData = {
        overviewList: [
          {
            desc: "应缴费用（万元）",
            amount: 2023.11,
            color: "rgba(77, 182, 255, 0.8)"
          },
          {
            desc: "已收费用（万元）",
            amount: 1010.51,
            color: "rgba(145, 169, 178, 0.8)"
          },
          {
            desc: "待收费用（万元）",
            amount: 1023.35,
            color: "rgba(255, 184, 156, 0.8)"
          }
        ],
        overviewChartsList: [
          {
            title: "广告费",
            isCollect: "已收取",
            price: 304.12,
            rate: 93
          },
          {
            title: "物业管理费",
            isCollect: "已收取",
            price: 416.37,
            rate: 68
          },
          {
            title: "车位管理费",
            isCollect: "已收取",
            price: 164.56,
            rate: 9
          },
          {
            title: "垃圾处理费",
            isCollect: "已收取",
            price: 147.18,
            rate: 76
          }
        ]
      };
    },

    /**
     * 获取各楼栋收缴统计数据方法
     */
    getCollectionData() {
      this.collectionSituationList = generateCollectionData(0);
    }
  }
};
</script>

<style lang="less" scoped>
.panel-left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .panel-item-container {
    height: 100%;

    // 情况概览区域样式
    .overview-container {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .overview-item-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1.25rem;

        .overview-item-img {
          width: 6.25rem;
          height: 5rem;
        }

        .overview-item-num {
          margin: 0.3125rem 0;
          font-size: 1.5rem;
          font-family: Chakra Petch Regular;
          color: #b0e0ff;
          line-height: 1.75rem;
        }

        .overview-item-desc {
          font-size: 0.875rem;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 400;
          color: #fff;
          line-height: 0.875rem;
        }
      }
    }

    // 本月缴费统计区域样式
    .statistics-container {
      display: flex;
      flex-direction: column;
      height: 100%;

      .statistics-panel-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 1.25rem;

        .statistics-panel-item-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 6.6875rem;
          height: 3.75rem;

          .statistics-panel-item-desc {
            z-index: 10;
            font-size: 0.75rem;
            font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
            font-weight: 400;
            color: #fff;
            line-height: 16px;
          }

          .statistics-panel-item-num {
            z-index: 10;
            margin-top: 0.375rem;
            font-size: 0.9375rem;
            font-weight: 600;
            font-family: Chakra Petch Regular;
            color: rgba(77, 182, 255, 0.8);
            line-height: 21px;
            letter-spacing: 0.1875rem;
          }
        }
      }

      .statistics-chart {
        flex: 1;
        height: 100%;
        margin-top: 1.25rem;
      }
    }

    // 哥漏洞收缴情况区域样式
    .collection-container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
}
</style>
